<template>
	<div class="p-6 space-y-6">
		<el-tabs v-model="activeTab">
			<el-tab-pane label="人员信息" name="personnel">
				<el-button type="primary" size="small" class="mb-4" @click="openUserDialog">新建人员</el-button>
				<el-table :data="users" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="姓名" />
					<el-table-column prop="department" label="部门" />
					<el-table-column prop="position" label="职位" />
					<el-table-column prop="phone" label="电话" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="部门管理" name="department">
				<el-button type="primary" size="small" class="mb-4" @click="openDeptDialog">新建部门</el-button>
				<el-table :data="departments" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="部门名称" />
					<el-table-column prop="manager" label="负责人" />
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<!-- 人员信息弹窗 -->
		<el-dialog v-model="userDialog" title="新建人员" width="400px">
			<el-form :model="currentUser" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="currentUser.name" />
				</el-form-item>
				<el-form-item label="部门">
					<el-input v-model="currentUser.department" />
				</el-form-item>
				<el-form-item label="职位">
					<el-input v-model="currentUser.position" />
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="currentUser.phone" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveUser">保存</el-button>
					<el-button @click="userDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 部门管理弹窗 -->
		<el-dialog v-model="deptDialog" title="新建部门" width="400px">
			<el-form :model="currentDept" label-width="80px">
				<el-form-item label="部门名称">
					<el-input v-model="currentDept.name" />
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="currentDept.manager" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="saveDept">保存</el-button>
					<el-button @click="deptDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('personnel')

const users = ref([])
const departments = ref([
	{ name: '销售部', manager: '张三' },
	{ name: '技术部', manager: '李四' },
	{ name: '财务部', manager: '王五' }
])

const userDialog = ref(false)
const currentUser = ref({ name: '', department: '', position: '', phone: '' })

const openUserDialog = () => {
	currentUser.value = { name: '', department: '', position: '', phone: '' }
	userDialog.value = true
}

const saveUser = () => {
	users.value.push({ ...currentUser.value })
	ElMessage.success('人员已保存')
	userDialog.value = false
}

const deptDialog = ref(false)
const currentDept = ref({ name: '', manager: '' })

const openDeptDialog = () => {
	currentDept.value = { name: '', manager: '' }
	deptDialog.value = true
}

const saveDept = () => {
	departments.value.push({ ...currentDept.value })
	ElMessage.success('部门已保存')
	deptDialog.value = false
}

// 生成15条模拟数据
const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '王十二', '刘十三', '陈十四', '杨十五', '何十六', '吕十七']
const depts = ['销售部', '技术部', '财务部', '人事部', '运营部']
const positions = ['经理', '工程师', '助理', '专员', '主管']
users.value = Array.from({ length: 15 }).map((_, i) => ({
	name: names[i % names.length],
	department: depts[Math.floor(Math.random() * depts.length)],
	position: positions[Math.floor(Math.random() * positions.length)],
	phone: '1380000' + String(1000 + i)
}))
</script>


<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
